<template>
  <div class="wrap-scroll" :ref="wrapRef" :style="{height: `${height}px`}" @mouseenter="stopScroll"
       @mouseleave="startScroll">
    <div class="scroll-area" :ref="scrollRef">
      <slot></slot>
      <slot v-if="showDouble"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    components: {},
    props: {
      width: {
        type: Number,
        default: 400
      },
      height: {
        type: Number,
        default: 50
      }
    },
    data() {
      return {
        intAnimate: null,
        wrapRef: 'wrap' + Math.random(),
        scrollRef: 'scroll' + Math.random(),
        stop: true,
        lastTime: '',
        animeJob: '',
        showDouble: false,
      }
    },
    watch: {

    },
    mounted() {
      // document.querySelector("#scroll").addEventListener('scroll',this.stopScroll,true)
      //每次滚动条向左移动2，改变speed可以调整滚动速度
      // const speed = 1
      //设置浏览器刷新帧率，调整滚动速度

      this.$nextTick(()=>{
        this.lastTime = new Date().getTime() //上次执行的时刻
        // 在mounted阶段，才可以获取真实DOM节点
        // showArea.scrollTop = 0
        // const showArea = this.$refs[this.wrapRef]
        // const slotArea = this.$refs[this.scrollRef]
        // console.log(slotArea.clientHeight, showArea.clientHeight)
        // this.showDouble = showArea.clientHeight <= slotArea.scrollHeight;
        this.animeJob = requestAnimationFrame(this.animate);
      })

    },
    beforeDestroy() {
      clearInterval(this.intAnimate)
    },
    methods: {
      animate() {
        const fps = 30
        const fpsInterval = 1000 / fps
        const showArea = this.$refs[this.wrapRef]
        const slotArea = this.$refs[this.scrollRef]
        this.showDouble = slotArea.clientHeight > showArea.clientHeight;
        this.animeJob = requestAnimationFrame(this.animate);
        // 执行时的时间
        let now = new Date().getTime()
        let elapsed = now - this.lastTime;
        // 经过了足够的时间
        if (elapsed > fpsInterval) {
          this.lastTime = now - (elapsed % fpsInterval); //校正当前时间
          // console.log(showArea)
          if (showArea.scrollTop >= (slotArea.scrollHeight / 2)) {
            showArea.scrollTop = 0
            // this.showDouble = false
          } else {
            showArea.scrollTop += 1
          }
        }
      },
      resetScroll() {
        this.$refs[this.wrapRef].scrollTop = 0
      },
      startScroll(){
        this.intAnimate = setInterval(() => {
          this.animate()
        }, 4000)
      },
      stopScroll() {
        clearInterval(this.intAnimate)
        cancelAnimationFrame(this.animeJob)
      },
    },
    destroyed() {
      this.stopScroll()
    }
  }
</script>

<style scoped lang="scss">
  .wrap-scroll {
    /*overflow: hidden;*/
    overflow-y: auto;
    overflow-x: hidden;

    &:hover::-webkit-scrollbar {
      width: 12px; background:  transparent;
    }
    &:hover::-webkit-scrollbar-thumb {
      border-radius: 3px; /*滑块圆角*/
    }
  }

  .wrap-scroll::-webkit-scrollbar {
    width: 5px; background:  transparent;
  }
  .wrap-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .wrap-scroll::-webkit-scrollbar-thumb {
    background: #3486a8; /*滑块颜色*/
    border-radius: 5px; /*滑块圆角*/
  }

  .wrap-scroll::-webkit-scrollbar-thumb:hover {
    background: #0881f9; /*鼠标移入滑块变色*/
  }
</style>
